<script lang="ts" setup>
import {onMounted, ref} from 'vue'

onMounted(()=>{

    BindMyChart()
})

const BindMyChart = ()=>{

}

</script>
<template>
    <div class="dataFile" ref="dataFile">
        <div class="dataFileManage">
            <div class="dataFileManageTitle">
                文件下载详情
            </div>
            <div class="dataFileManageBox">
                <div class="dataFileList_thead">
                    <span>文件类型</span>
                    <span>文件名</span>
                    <span>下载时间</span>
                </div>
                <p class="dataFileList_line"></p>
                <el-scrollbar height="calc(100% - 52px)">
                    <ul class="dataFileManageList">
                        <li v-for="(it,index) in 10" :key="index">
                            <span>.txt</span>
                            <span>新建任务文件</span>
                            <span>12:30:02</span>
                        </li>
                    </ul>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .dataFile{
        border-radius: 10px;
        position: absolute;
        left: 10px;
        bottom: 20px;
        width: 400px;
        height: 300px;
        background-color: rgb(83, 183, 244, 0.61);
    }
    .dataFileManage{
        width: 100%;
        height: 100%;
    }
    .dataFileManageTitle{
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
    }
    .dataFileManageBox{
        height: calc(100% - 40px);
        width: 100%;
    }
    .dataFileManageList{
        width: 80%;
        margin: auto;
        overflow: auto;
    }
    .dataFileList_line{
        width: 90%;
        height: 3px;
        margin: 12px auto 8px auto;
        border-top: 2px solid;
        border-bottom: 3px solid;
        border-image: radial-gradient(#3a56ff, #fcfcfc00) 1;
    }
    .dataFileManageList li{
        width: 100%;
        display: flex;
        line-height: 30px;
        color: #fff;
        text-align: center;
        justify-content: space-between;
    }
    .dataFileList_thead{
        color: #40a2f3;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin: auto;
    }
</style>